<template>
	<view>
		<!-- 电子签名 -->
		<view style="width: 750rpx ;height: 750rpx;">
			<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth"></l-signature>
		</view>
		<view class="row row-between">
			<button @click="onClick('clear')">清空</button>
			<button @click="onClick('undo')">撤消</button>
			<button @click="onClick('save')">保存</button>
		</view>
		<!-- uvue 不支持 openSmooth -->
		<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				penColor: '#000',
				penSize: 5,
				url: '',
				openSmooth: true
			}
		},
		methods: {
			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							console.log('签名res', res)
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// H5 生成的是base64
							this.url = res.tempFilePath
							
							console.log('生成图片的临时路径', this.url)
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
		}
	}
</script>

<style>

</style>
